<script setup lang="ts">
import {nextTick, onMounted, ref, watch} from "vue";
import {getDocument, GlobalWorkerOptions} from "pdfjs-dist";
import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min.mjs'

const props = defineProps(["url", "showPageList"])

const canvasRef = ref()

onMounted(() => {
  watch(props, (value, oldValue, onCleanup) => {
    // 如果有设置显示内容，就开始显示
    if (props.url && props.showPageList.length > 0) loadPdf()
  }, {immediate: true})
})

const loadPdf = () => {
  nextTick(async () => {
    GlobalWorkerOptions.workerSrc = pdfjsWorker.default
    const pdf = await getDocument(props.url).promise
    const page = await pdf.getPage(props.showPageList[0]) // 设置显示页
    const viewport = page.getViewport({scale: 1})

    // Render PDF page into canvas context
    page.render({
      canvasContext: canvasRef.value.getContext("2d"),
      viewport: viewport
    });
  })
}

</script>

<template>
  <div class="show_sop">
    <canvas ref="canvasRef" />
  </div>
</template>

<style scoped lang="scss">
.show_sop{
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  canvas{
    width: 100%;
    height: 100%;
  }
}
</style>
